<script lang="ts" setup>
import { ActionBar, ActionBarButton, Field, showFailToast, showSuccessToast, ActionBarIcon } from 'vant'
import { PricePolicyModel } from '~/model/PricePolicyModel'
import { PricePolicyApi } from '~/api/PricePolicyApi'
import { OrderItemModel } from '~/model/OrderItemModel'
import PairsView from '~/components/common/PairsView.vue'
import { protectedAction } from '~/utils'

const route = useRoute()
const router = useRouter()
const policy = ref(null as (PricePolicyModel | null))
const id = ref(Number.parseInt(route.query.id as string))
const isNew = computed(() => {
  return id.value === 0
})

onMounted(() => {
  if (isNew.value) {
    policy.value = new PricePolicyModel()
  }
  else {
    console.log('asd')
    PricePolicyApi.getAll().then((data: PricePolicyModel[]) => {
      console.log('qwe')
      policy.value = data.find(x => x.id === id.value)!
    })
  }
})

const pickingConsumer = ref(false)
function pickConsumer() {
  pickingConsumer.value = true
}

const pickingProduct = ref(false)
function pickProduct() {
  pickingProduct.value = true
}
function onItemChosen(item: OrderItemModel) {
  policy.value!.product = item.material
}

async function onSave() {
  let ok = false
  if (id.value === 0) {
    ok = await PricePolicyApi.add(policy.value!)
  }
  else {
    ok = await PricePolicyApi.update(id.value, policy.value!)
  }
  if (ok) {
    showSuccessToast('操作成功')
    setTimeout(() => {
      router.back()
    }, 50)
  }
  else {
    showFailToast('操作失败，请联系管理员')
  }
}

async function onDelete() {
  const ok = await PricePolicyApi.remove(id.value)
  if (ok) {
    showSuccessToast('删除成功')
    window.sessionStorage.clear()
    setTimeout(() => {
      router.back()
    }, 50)
  }
  else {
    showFailToast('操作失败，请联系管理员')
  }
}
</script>

<template>
  <div>
    <div bg-white px lh-10>
      <span v-if="isNew">新价格策略</span>
      <span v-else>修改价格策略</span>
    </div>
    <div v-if="policy">
      <ContactPick
        v-model="pickingConsumer"
        v-model:consumer="policy.consumer"
      />
      <MaterialPick
        v-model:show="pickingProduct"
        :current="policy.product"
        :show-delete="false"
        @update:item="onItemChosen"
      />
      <PairsView
        mt2 :pairs="[
          ['客户', policy.consumer!.name, () => pickConsumer()],
          ['商品', policy.product!.name ? `${policy.product!.name}(${policy.product!.specification})` : '', () => pickProduct()],
        ]"
      />
      <Field
        v-model="policy.price"
        label="价格"
        placeholder="0"
        type="number"
        input-align="right"
      />
      <Field
        v-model="policy.note"
        label="备注"
        placeholder="常规(无备注)"
        input-align="right"
      />
    </div>
    <ActionBar>
      <ActionBarIcon v-if="!isNew" text="删除" @click="protectedAction(onDelete, '确认删除？')">
        <template #icon>
          <FontAwesomeIcon icon="trash-can" color="red" />
        </template>
      </ActionBarIcon>
      <ActionBarButton :type="isNew ? 'success' : 'primary'" :text="isNew ? '创建' : '保存'" @click="onSave" />
    </ActionBar>
  </div>
</template>

<style scoped>

</style>
